<html>
<head>
    <title>Calendar Example</title>
    <script type="text/javascript" src="../../../../build/yui/yui.js"></script>
<style>
.yui3-skin-sam .redtext {
	color:#ff0000;
}
</style>
</head>
<body class="yui3-skin-sam">
<div id="mycalendar"></div>
<div id="currentDate"></div>

<script>
YUI({
base: '../../../../build/'
}).use('calendar',  function(Y) {

Y.CalendarBase.CONTENT_TEMPLATE = Y.CalendarBase.TWO_PANE_TEMPLATE;

function myHeaderRenderer (curDate) {
	     	var ydate = Y.DataType.Date,
	     	    output = ydate.format(curDate, {format: "%B %Y"}) +
	     	             " &mdash; " +
	     	             ydate.format(ydate.addMonths(curDate, 1), {format: "%B %Y"});
	     	return output;
	     };


	     var myRules = {"all":
	     	{
	     		"all": {
	     			"all": {
	     				"0,6": "all_weekends"
	     			}
	     		}
	     	},
	     	"2010": {
	     		"all": {
	     			"5": "thefifths"
	     		}
	     	}

	     };

function myFilter (oDate, oNode, rules) {

if (rules.indexOf("all_weekends") >= 0) {
	oNode.addClass('redtext');
}	

};	     

         var calendar = new Y.Calendar({
	        contentBox: "#mycalendar",
	        showNextMonth: true,
	        showPrevMonth: true,
	        disabledDatesRule: "thefifths",
	        selectionMode: "multiple",
	        minimumDate: new Date(2011,6,1),
	        maximumDate: new Date(2011,11,1),
	        headerRenderer: myHeaderRenderer,
			width:'600px'}).render();

		calendar.set("customRenderer", {rules: myRules, filterFunction: myFilter});

});
</script>
</body>
</html>
